<template>
	<view class="scroll-box">
		<!-- <view class="subtitle">{{listTitle}}</view> -->
		<!-- <scroll-view scroll-x="true" class="scroll-box"> -->
			<view class="item-box" v-for="(item,index) in goodsList" :key="index"
				@click="chooseItem(item)">
				<image :src="item.pic" style="width: 148px; height: 84px;" mode=""></image>
				<!-- <view class="item-name">{{item.name}}</view> -->
				<view class="item-descr">{{item.title}}</view>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script setup lang="ts">
    import { ref,defineProps,defineEmits } from 'vue'
    const emits = defineEmits(['clickFn'])
    import { useUserStore } from '@/stores'
	import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
    const chooseItem = (item:any)=>{
        // console.log(item)
        emits('clickFn',item)
    }
    const props = defineProps({
        goodsList:{
            type:Array,
            default:[]
        }
    })                    
</script>

<style>
	/deep/ ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
</style>
<style lang="scss" scoped >
	.subtitle {
		/* padding: 16rpx 32rpx; */
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 48rpx;
	}

	.scroll-box {
		display: flex;
		align-items: center;
		overflow-x: auto;
		/* white-space: nowrap; */
		width: 100%;
		min-height: 210x;
	}

	.item-box {
		display: inline-block;
		width: 162px;
		/* height: 110px; */
		margin-right: 16px;
		/* padding: 0 12p 0 12px; */
		/* margin-left: 8px; */
		/* border-radius: 12rpx; */
		/* border: 4rpx solid #FFFFFF; */
		/* box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.1); */
		text-align: left;
		&:last-child {
			margin-right: 0;
		}
	}

	.item-name {
		display: table;
		width: 100%;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
		white-space: pre-wrap;
		color: #333333;
		margin-top: 8rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.item-descr {
		display: table;
		width: 88%;
        height: 24px;
        /* margin-left: 4%; */
        text-align: left;
        /* text-align: center; */
        font-family: PingFang SC;
		font-size: 14px;
		line-height: 24px;
		white-space: pre-wrap;
		color: rgba(0, 0, 0, 0.6);
		/* margin-top: 12rpx; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.bg0 {
		background: linear-gradient(180deg, #FFE8C2 0%, #FFFFFF 100%);
	}

	.bg1 {
		background: linear-gradient(180deg, #D3DBFF 0%, #FFFFFF 100%);
	}

	.bg2 {
		background: linear-gradient(360deg, #FFFFFF 0%, #D7C4FF 100%);
	}

	.bg3 {
		background: linear-gradient(180deg, #FFD3D3 0%, #FFFFFF 100%);
	}

	.bg4 {
		background: linear-gradient(180deg, #D3FFFB 0%, #FFFFFF 100%);
	}

	.bg5 {
		background: linear-gradient(180deg, #D3FFE7 0%, #FFFFFF 100%);
	}

	.bg6 {
		background: linear-gradient(180deg, #FFD3FB 0%, #FFFFFF 100%);
	}
</style>